<template>
  <div class="myhome">
    <div class="myhome-header">
      <img
        class="myhome-header-img"
        src="https://css.mafengwo.net/mobile/images/header/logo2.png
"
        alt=""
      />
      <van-search
        class="myhome-header-search"
        v-model="value"
        placeholder="请输入搜索关键词" 
        shape="round" 
        @focus="gotosearch"
      />
      <span class="myhome-header-sp" @click="gotologin">登录</span>
    </div>
    <div class="myhome-lunbo">
      <mybanner></mybanner>
    </div>
    <div class="myhome-guide">
      <myguide></myguide>
    </div>
    <div class="myhome-suggest">推荐攻略</div>
    <div class="myhome-detail">
        <mydetail v-for="item in displayshowdata" :key="item.id" :item="item"></mydetail>
    </div>
    <div>
      <!-- //分页 -->
      <van-pagination
        v-model="page" 
        :items-per-page="pagesize"
        :total-items="list.length"
        :show-page-size="3"
        force-ellipses
      />
    </div>
    <div class="myhome-footer">
      <myfooter></myfooter>
    </div>
    <div @click="gototop" class="gototop"><van-icon name="back-top" size="25"/></div>
  </div>
</template>

<script>
import myfooter from "@/footer/myfooter.vue"
import mybanner from "@/banner/mybanner.vue";
import myguide from "@/guide/myguide.vue";
import mydetail from "@/detail/mydetail.vue";
import { getdetaildata } from "@/detail/detaildata.js";

//使用pinia
import {useSuggestdataStore} from "@/store/mylydata.js"
import { mapActions, mapState } from "pinia";
export default {
  components: {
    mybanner,
    myguide,
    mydetail,
    myfooter,
  },
  data(){
    return{
      //存放数据
      list:[],
      //当前页码
      page:1,
      //每页显示条数
      pagesize:10
    }
  },
  computed:{
    //分页
      displayshowdata(){
        return this.list.slice((this.page - 1) * this.pagesize, this.page * this.pagesize);
      },
  },
  methods:{
    //请求数据
    fetchdata(){
      getdetaildata().then((res)=>{
        console.log(res.data)
        this.list=res.data.data
      })
    },
    //回到顶部
    gototop(){
      var timer=setInterval(function(){
        var top=document.body.scrollTop || document.documentElement.scrollTop
        var speed=top/4
        if(document.body.scrollTop!=0){
          document.body.scrollTop-=speed
        }else{
          document.documentElement.scrollTop-=speed
        }
        if(top==0){
          clearInterval(timer)
        }
      },50)
    },
    //跳转到登录页
    gotologin(){
      this.$router.push("/login")
    },
    //跳转到搜索页
    gotosearch(){
      this.$router.push("/search")
    }
  },
  mounted(){
    this.fetchdata()
  }
};
</script>

<!-- <script setup>
import myfooter from "@/footer/myfooter.vue"
import mybanner from "@/banner/mybanner.vue";
import myguide from "@/guide/myguide.vue";
import mydetail from "@/detail/mydetail.vue";
import { getdetaildata } from "@/detail/detaildata.js";

//使用pinia
import {useSuggestdataStore} from "@/store/mylydata.js"
import { mapActions, mapState } from "pinia";
import {ref,onMounted} from "vue"
//调用它
const suggestdataStore=useSuggestdataStore()
//在template中直接使用下面这个
// {{suggestdataStore.suggestlist}}


    // mybanner,
    // myguide,
    // mydetail,
    // myfooter,


   
      //存放数据
      var list=ref([]);
      //当前页码
      var page=1;
      //每页显示条数
      var pagesize=10

// list=suggestdataStore.fetchsuggestlist()
      onMounted(()=>{
        list.value=suggestdataStore.suggestlist
        console.log(list.value)
      })
 
    //分页
      function displayshowdata(){
        return this.list.slice((this.page - 1) * this.pagesize, this.page * this.pagesize);
      }
      // ...mapState("useSuggestdataStore",["suggestlist"])
 
  
    // ...mapActions("useSuggestdataStore",["fetchsuggestlist"]),
    //请求数据
    // function fetchdata(){
    //   getdetaildata().then((res)=>{
    //     console.log(res.data)
    //     this.list=res.data.data
    //   })
    // }
    //回到顶部
    function gototop(){
      var timer=setInterval(function(){
        var top=document.body.scrollTop || document.documentElement.scrollTop
        var speed=top/4
        if(document.body.scrollTop!=0){
          document.body.scrollTop-=speed
        }else{
          document.documentElement.scrollTop-=speed
        }
        if(top==0){
          clearInterval(timer)
        }
      },50)
    }
    //跳转到登录页
    function gotologin(){
      this.$router.push("/login")
    }
    //跳转到搜索页
    function gotosearch(){
      this.$router.push("/search")
    }
 
    // this.fetchdata()
    // this.fetchsuggestlist()
  

</script> -->

<style lang="scss" scoped>
.myhome {
  width: 375px;
  &-header {
    height: 50px;
    width: 100%;
    display: flex;
    background-color: red;
    align-items: flex-start;
    &-img {
      display: block;
      width: 94px;
      height: 25px;
      padding: 15px 10px 0px;
    }
    &-search {
      width: 221px;
      height: 26px;
      margin-top: 15px;
    }
    &-sp {
      width: 40px;
      height: 24px;
      color: #ffa800;
      display: block;
      margin-top: 18px;
    }
  }
  &-suggest {
    width: 356px;
    height: 20px;
    border-left: 3px solid yellow;
    margin-left: 15px;
    font-size: 20px;
    padding-left: 5px;
  }
  .gototop{
    position: fixed;
    right: 16px;
    bottom: 90px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: bisque;
    z-index: 9999;
    text-align: center;
    line-height: 40px;
    opacity: 0.8;
  }
}
</style>
